<script>
import {Button, Cell, DropdownItem, DropdownMenu, NavBar, Tag} from "vant";

export default {
  name: "WWorkOrderView",
  data() {
    return {
      // 筛选条件
      filterOptions: {
        timestatus: 0,
        workOrderPriority: 0,
        workOrderType: 0,
        status: 0,
      },
      time: this.getCurrentTime(),
      // 下拉选项
      timestatus: [
        { text: '工单日期', value: 0},
        { text: '今天', value: 1 },
        { text: '昨日', value: 2 },
        { text: '前天', value: 3 },
      ],
      workOrderPriority: [
        { text: '优先级', value: 0 },
        { text: '普通', value: 1 },
        { text: '紧急', value: 2 },
        { text: '特急', value: 3 },
      ],
      workOrderType: [
        { text: '工单类别', value: 0 },
        { text: '维修', value: 1 },
        { text: '维保', value: 2 },
        { text: '巡检', value: 3 },
      ],
      statusOptions: [
        { text: '全部', value: 0 },
        { text: '处理', value: 1 },
        { text: '已完成', value: 2 },
      ],
      // 工单列表
      tickets: [],
      formInline: {}
    }
  },
  methods:{
    getCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = this.padNumber(now.getMonth() + 1);
      const day = this.padNumber(now.getDate());
      const hours = this.padNumber(now.getHours());
      const minutes = this.padNumber(now.getMinutes());
      const seconds = this.padNumber(now.getSeconds());
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    padNumber(num) {
      return num < 10 ? '0' + num : num;
    },
    findAll(){
      this.axios.post(`http://localhost:9999/api-work-order-service/work-order/findAll`, this.filterOptions).then(res => {
        this.tickets = res.data.data;
        console.log(res)
        console.log(this.filterOptions)
        console.log(this.time)
      })
    },
    onBack() {
      this.$router.push('/medical');
    },
    handleTicket(id) {
      this.$router.push({path: '/wo-de/xq', query: {id: id}})
      console.log(id)
    },
    getPriorityStyle(priority) {
      switch (priority) {
        case '特急':
          return { color: '#f44336' };
        case '紧急':
          return { color: '#ff9800' };
        default:
          return { color: '#2196f3' };
      }
    },
    userhq(){
      const item = localStorage.getItem('aa');
      const aaaa= JSON.parse(item)
      let name= aaaa['username'];
      let phone= aaaa['phone'];
      let pid= aaaa['userId'];
      this.pid=pid;
      console.log(this.pid1);
      console.log(this.userId);
      console.log(name);
      console.log(phone);
    },
  },
  created() {
    this.pid = this.$route.query.pid;
    this.filterOptions.pid = this.pid;
    console.log(this.pid);
    console.log(this.filterOptions);
    this.findAll();
    this.userhq();
  },
  components: {
    [NavBar.name]: NavBar,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [Button.name]: Button,
  },
}
</script>

<template>
  <div class="ticket-view">
    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="运维工单"
        left-arrow
        @click-left="onBack"
        fixed
    />

    <!-- 筛选菜单 -->
    <div class="filter-container" >
      <van-dropdown-menu >
        <van-dropdown-item
            v-model="filterOptions.timestatus"
            :options="timestatus"
            @change="findAll"
        />
        <van-dropdown-item
            v-model="filterOptions.workOrderPriority"
            :options="workOrderPriority"
            @change="findAll"
        />
        <van-dropdown-item
            v-model="filterOptions.workOrderType"
            :options="workOrderType"
            @change="findAll"
        />
        <van-dropdown-item
            v-model="filterOptions.status"
            :options="statusOptions"
            @change="findAll"
        />
      </van-dropdown-menu>
    </div>

    <!-- 工单列表 -->
    <div class="ticket-list">
      <div v-for="ticket in tickets" :key="ticket.id" class="ticket-item">
        <div class="ticket-header">
          <div class="ticket-id">编号：{{ ticket.workOrderNumber }}</div>
          <!--          标签状态右对齐-->
          <div class="ticket-status">
            <van-tag v-if="ticket.status === 1" type="success">普通</van-tag>
            <van-tag v-if="ticket.status === 2" type="warning">紧急</van-tag>
            <van-tag v-if="ticket.status === 3" type="danger">特级</van-tag>
          </div>
        </div>
        <div class="ticket-content">
          <div class="ticket-info">
            <div class="ticket-header">工单类别：{{ ticket.workOrderType==1?'维修' : ticket.workOrderType==2?'维保' : '巡检' }}</div>
            <div class="ticket-id">开始时间：{{ ticket.workOrderTime }}</div>
          </div>
          <div class="ticket-actions">
            <van-button square type="primary" size="small" @click="handleTicket(ticket.workOrderId)">{{ ticket.status == 1 ? '处理' : ticket.status==2 ? '已完成' : '已关闭' }}</van-button>
          </div>
        </div>
      </div>
    </div>
  </div>


</template>

<style scoped>
.ticket-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
}

.filter-container {
  position: sticky;
  top: 46px;
  z-index: 10;
}

:deep(.van-dropdown-menu) {
  background-color: #fff;
}

.ticket-list {
  padding: 12px;
}

.ticket-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebedf0;
}

.ticket-id {
  font-size: 14px;
  color: #323233;
}

.ticket-priority {
  font-size: 14px;
  font-weight: 500;
}

.ticket-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-info {
  font-size: 13px;
  color: #646566;
  line-height: 1.5;
}

:deep(.van-button--primary) {
  background-color: #1989fa;
  border-color: #1989fa;
}

:deep(.van-button--success) {
  background-color: #07c160;
  border-color: #07c160;
}
</style>